<template>
    <div>
        <div class="select_management">
            <el-button type="primary" @click="dialogVisible = true">开始传输</el-button>
        </div>
        <div class="table_management">
            <el-table :data="tableData" style="width: 100%" border stripe :header-cell-style="getRowClass"
                :max-height="maxHeight" v-loading="loading">
                <el-table-column label="导出服务器" prop="derive" align="center">
                </el-table-column>
                <el-table-column label="接收服务器" prop="introduction" align="center">
                </el-table-column>
                <el-table-column label="传输时间" prop="date" align="center">
                </el-table-column>
                <el-table-column label="文件名称" prop="fileName" align="center">
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="createDate">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="queryParams.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="queryParams.pageSize"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- dialog -->
        <el-dialog :title="title" :visible.sync="dialogVisible" :width="serverWidth" v-dialogDrag>
            <el-form label-position="left" label-width="100px" :model="form" :rules="rules" ref="server">
                <el-form-item label="导出服务器" prop="derive">
                    <el-input v-model.trim="form.derive"></el-input>
                </el-form-item>
                <el-form-item label="接收服务器" prop="introduction">
                    <el-input v-model.trim="form.introduction"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'GenecloudUiButton',

    data() {
        return {
            maxHeight: `600px`,
            loading: true,
            queryParams: {
                pageNo: 1,
                pageSize: 10,
            },
            total: 10,
            tableData: [],
            //dialog
            dialogVisible: false,
            title: '',
            serverWidth: '500px',
            form: {
                derive: '',
                introduction: '',
            },
            rules:{
                derive:[
                    { required: true, message: '请填写导出服务器', trigger: 'blur' },
                ],
                introduction:[
                    { required: true, message: '请填写接收服务器', trigger: 'blur' },
                ]
            }
        };
    },
    created() {
        this.getList(this.queryParams)
        window.addEventListener('resize', this.windowResize)
    },
    mounted() {

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.windowResize)
    },
    methods: {
        //table 自定义表头
        getRowClass({ rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return "background:#eee;font-weight: 400;color:#666;text-align:center";
            }
        },
        windowResize() {
            let val = document.body.clientHeight
            this.maxHeight = (val - 350) + 'px'
        },
        async getList(queryParams) {
            this.loading = false
        },
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.getList(this.queryParams)
        },
        //修改页码
        handleCurrentChange(val) {
            this.queryParams.pageNo = val
            this.getList(this.queryParams)
        },
        //确认
        confirm() {
            this.$message({
                type:'success',
                message:'传输任务已提交！'
            })
            this.cancel()
        },
        //取消
        cancel() {
            this.form = {
                derive: '',
                introduction: '',
            }
            this.dialogVisible = false
        }
    },
};
</script>

<style lang="scss" scoped>
.table_management {
    border: 1px solid #d3ddeb;
    border-radius: 6px;

    .createDate {
        padding-top: 15px;
    }
}

.select_management {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 50px;
    margin-bottom: 15px;

    ::v-deep .el-input__inner {
        height: 35px;
        line-height: 35px;
        border-radius: 4px;
    }

    .title {
        margin-left: 10px;
    }
}

::v-deep .el-dialog__header {
    text-align: center;
    font-weight: 700;
}

::v-deep .el-dialog__body {
    text-align: center;
    padding: 30px 20px 0;

    .el-input__inner {
        border-radius: 4px;
        // width: 280px;
    }
}

::v-deep .el-dialog__footer {
    display: flex;
    justify-content: center;
}
</style>